<script setup>
import { formatDate } from '@/utils/format.js'
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import FaceDetect from './FaceDetect.vue'

// const router = useRouter()
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const nowDateTime = new Date().toISOString()
const confirmText = ref(5)

const dialogVisible = ref(false)
const disabled = ref(true)
const interval = ref(null)
const handleDialog = () => {
  // 时段试卷未到答卷时间或已过答卷时间
  if (props.data.limit_start_time > nowDateTime) {
    return ElMessage.warning('未到答卷时间！')
  } else {
    dialogVisible.value = true
    interval.value = setInterval(() => {
      if (confirmText.value === 0) {
        disabled.value = false
        confirmText.value = '确定'
        clearInterval(interval.value)
        return
      }
      confirmText.value--
    }, 1000)
  }
}
const handleClose = () => {
  clearInterval(interval.value)
  interval.value = null
  confirmText.value = 5
  disabled.value = true
}

// 前往考试
const gotoPaper = () => {
  if (+props.data.face_status) {
    faceVisible.value = true
  } else {
    window.open(`/paper/${props.data.id}`, '_blank')
    handleClose()
  }
  dialogVisible.value = false
}

const faceVisible = ref(false)
const handleDetectResult = (val) => {
  if (val) {
    window.open(`/paper/${props.data.id}`, '_blank')
    handleClose()
    faceVisible.value = false
  }
}
</script>

<template>
  <el-card shadow="never" style="border-radius: 0.12rem">
    <ul>
      <li class="paper-card-header">
        <span>{{ data.name }}</span>
        <el-tag
          :type="data.submit ? 'success' : 'warning'"
          style="font-size: 0.12rem"
          >{{ data.submit ? '已提交' : '未提交' }}</el-tag
        >
      </li>
      <li class="paper-card-item">
        学科：<span class="item-text">{{ data.subject_name }}</span>
      </li>
      <li class="paper-card-item">
        题目数：<span class="item-text">{{ data.question_count }}</span>
      </li>
      <li class="paper-card-item">
        试卷总分：<span class="item-text">{{ data.score }}</span>
      </li>
      <li class="paper-card-item">
        考试时长：<span class="item-text">{{ data.suggest_time }} 分钟</span>
      </li>
      <li class="paper-card-item">
        开始时间：
        <span class="item-text">
          {{
            data.limit_start_time
              ? formatDate(data.limit_start_time, 'YYYY-MM-DD HH:mm')
              : '无'
          }}
        </span>
      </li>
      <li class="paper-card-item">
        结束时间：
        <span class="item-text">
          {{
            data.limit_end_time
              ? formatDate(data.limit_end_time, 'YYYY-MM-DD HH:mm')
              : '无'
          }}
        </span>
      </li>
    </ul>
    <div class="paper-card-link-box">
      <span class="paper-card-link" v-if="!data.submit" @click="handleDialog">
        开始考试
      </span>
    </div>
    <el-dialog
      title="考试注意事项"
      v-model="dialogVisible"
      width="30%"
      @closed="handleClose"
    >
      <ul>
        <li>1. 中途切换页面3次，考试直接结束</li>
        <li>2. 点击确认即开始计时，中途不可暂停</li>
        <li>3. 中途关闭页面，考试直接结束</li>
        <li v-show="+data.face_status">4. 考前请先进行人脸识别</li>
      </ul>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotoPaper" :disabled="disabled">
          {{ confirmText }}
        </el-button>
      </template>
    </el-dialog>
    <FaceDetect
      v-if="faceVisible"
      v-model="faceVisible"
      @handleSuccess="handleDetectResult"
    ></FaceDetect>
  </el-card>
</template>

<style lang="scss" scoped>
.paper-card-header {
  font-weight: bold;
  padding-bottom: 0.1rem;
  font-size: 0.16rem;
  min-height: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.paper-card-item {
  margin: 0.1rem 0;
  color: #989898;
  font-size: 0.14rem;

  .item-text {
    color: #303030;
  }
}

.paper-card-link-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2rem;

  .paper-card-link {
    font-size: 0.14rem;
    color: #409eff;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      color: #0080ff;
    }
  }
}
</style>
